<script>
import { computed, defineComponent, inject, reactive, ref } from 'vue'
import { logisticsQueryRegionExtraById } from '@Config/server/api'
import Province from '@Components/areaController/components/province'
import { findIndex, uniqueId } from 'lodash'
import ProvinceWin from '@Components/areaController/components/provinceArea'

export default defineComponent({
  props: {
    type: {
      type: Number,
      default: 1,
    },
    select: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    Province,
    ProvinceWin,
  },
  emits: ['select'],
  setup(props, context) {
    let provices_list = reactive({
      data: [],
    })

    let select = computed(() => {
      return props.select
    })

    let getAllProvinces = async () => {
      let _provinces = await logisticsQueryRegionExtraById({
        id: 0,
        type: props.type,
      })
      provices_list.data = _provinces.data
    }

    getAllProvinces()
    //添加数据
    // let addHandler = (params) => {
    //   context.emit('add', params)
    // }

    // //删除数据
    // let subsHandler = (params) => {
    //   context.emit('subs', params)
    // }

    // let getSelectedIds = (_provinces) => {
    //   let province_code_2 = _provinces.adcode.substring(0, 2)

    //   let _r = props.selectedData.data[province_code_2] || []

    //   let result = _r.map((x) => {
    //     return x.id
    //   })
    //   return result
    // }
    let selectHandler = (params) => {
      if (params.params) {
        context.emit('select', params.params)
      } else {
        context.emit('select', params)
      }
    }

    let info = reactive({
      data: null,
    })

    let changeHandler = (e) => {
      let _index = findIndex(provices_list.data, { adcode: e })
      info.data = provices_list.data[_index]
    }

    let selectedData = inject('selectedArea')

    let getSelectedData = computed(() => {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      let selected_data = selectedData.data.filter((x) => {
        return x.adcode.substring(0, 2) == info.data.adcode.substring(0, 2)
      })

      return {
        selected_data,
      }
    })

    return {
      provices_list,
      props,
      selectHandler,
      info,
      changeHandler,
      getSelectedData,
      context,
      select,
      //  getSelectedIds,
    }
  },
  render() {
    return (
      <a-row>
        {this.provices_list.data.map((_provinces) => {
          return (
            <a-col span={4}>
              <Province
                info={_provinces}
                onSelect={this.selectHandler}
                type={this.props.type}
              />
            </a-col>
          )
        })}
        {this.select && (
          <a-col span={24}>
            <a-divider>快速设置</a-divider>
          </a-col>
        )}

        {this.select && (
          <a-col span={24}>
            <a-select
              style={{ width: '100%' }}
              options={this.provices_list.data.map((x) => {
                x.label = x.name
                x.value = x.adcode
                return x
              })}
              placeholder="请选择需要配置的省份"
              onChange={this.changeHandler}
            ></a-select>
          </a-col>
        )}

        <a-col span={24}>
          {this.info.data != null && (
            <div>
              <ProvinceWin
                info={this.info.data}
                selectedData={this.getSelectedData.selected_data}
                onSelect={this.selectHandler}
                type={this.props.type}
              />
            </div>
          )}
        </a-col>
      </a-row>
    )
  },
})
</script>
